<!-- *Author: 黄旗, *Date: 2020-08-04 15:45:59 -->
<template>
    <div>
        <Modal v-model='modal' :title="edit?'修改模块类型':'添加模块类型'" :width="950" :mask-closable='false' @on-cancel='canceledit(modalname)'>
            <Row :gutter="16">
                <Col span="14">
                    <Form ref='modalname' :label-width='90' :model='modalparams' :rules='createRules'>
                        <FormItem label='模块名称: ' prop='module_id'>
                            <Select :disabled="edit" v-model="modalparams.module_id" placeholder="请选择模块名称">
                                <template v-for="item in moduledata">
                                    <Option :value="item.id" :key="item.id">{{ item.name }}</Option>
                                </template>
                            </Select>
                        </FormItem>
                        <FormItem label='类型名称: ' prop='name'>
                            <Input :disabled="edit" v-model="modalparams.name" placeholder="请填写类型名称"/>
                        </FormItem>
                        <FormItem label='类型标识: ' prop='value'>
                            <Input :disabled="edit" v-model="modalparams.value" placeholder="请填写类型标识"/>
                        </FormItem>
                        <FormItem label='CSS代码: '>
                            <Input v-model="modalparams.css" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请填写CSS代码"/>
                        </FormItem>
                        <FormItem label='HTML代码: '>
                            <Input v-model="modalparams.html" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请填写HTML代码"/>
                        </FormItem>
                        <FormItem label='JS代码: '>
                            <Input v-model="modalparams.js" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请填写JS代码"/>
                        </FormItem>
                        <FormItem label='备注: '>
                            <Input v-model="modalparams.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请填写备注"/>
                        </FormItem>
                    </Form>
                </Col>
                <Col v-if="yulan" span="10">
                    <Card dis-hover :animated="false" class="templatecontrolCard">
                        <i-frame :src="yulan_url"></i-frame>
                    </Card>
                </Col>
            </Row>
            <div slot='footer'>
                <Button @click="preview" :disabled="!modalparams.css||!modalparams.html||!modalparams.js" :loading="yulan_loading" type='primary'>预览</Button>
                <Button @click="deleteedit()" v-hasC="butshow.Delete" :loading="delete_loading" v-if="edit">删除</Button>
                <Button @click="canceledit(modalname)" v-else>取消</Button>
                <Button @click="submitedit(modalname)" :loading="submit_loading" type='primary'>保存</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import { swtmoduleupdatemoduledetail, swtmoduledeletemoduledetail, swtmodulepreviewhtml } from '@api/templatecontrol'
    export default {
        name: '',
        props: {
            butshow: { type: Object },
            moduledata: { type: Array }
        },
        data () {
            return {
                selectdata: [],
                modalname: 'modalname',
                modal: false,
                edit: false,
                modalparams: { id: 0, module_id: '', name: '', value: '', css: '', html: '', js: '', remark: '' },
                createRules: {
                    module_id: [{ required: true, message: '请选择模块名称', trigger: 'change' }],
                    name: [{ required: true, message: '请填写类型名称', trigger: 'blur' }],
                    value: [{ required: true, message: '请填写类型标识', trigger: 'blur' }],
                    css: [{ required: true, message: '请填写CSS代码', trigger: 'blur' }],
                    html: [{ required: true, message: '请填写HTML代码', trigger: 'blur' }],
                    js: [{ required: true, message: '请填写JS代码', trigger: 'blur' }],
                    remark: [{ required: true, message: '请填写备注', trigger: 'blur' }]
                },
                delete_loading: false,
                submit_loading: false,
                yulan_url: '',
                yulan_loading: false,
                yulan: false
            };
        },
        mounted () {
        },
        /* 函数方法集合 */
        methods: {
            /* @函数功能: 初始化 */
            initial (row) {
                if (row) {
                    this.modalparams = { id: row.id, module_id: row.module_id, name: row.name, value: row.value, css: row.css, html: row.html, js: row.js, remark: row.remark }
                    this.edit = true
                } else {
                    this.modalparams = { id: 0, module_id: '', name: '', value: '', css: '', html: '', js: '', remark: '' }
                    this.edit = false
                }
                this.modal = true
            },
            askData () {
            },
            canceledit (name) {
                this.modal = false
                this.yulan = false
                this.$refs[name].resetFields();
            },
            submitedit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.submit_loading = true
                        swtmoduleupdatemoduledetail(this.modalparams).then(res => {
                            if (this.edit) this.$Message.success('修改模块类型成功');
                            else this.$Message.success('添加模块类型成功');
                            this.modal = false
                            this.yulan = false
                            this.submit_loading = false
                            this.$emit('askData')
                        })
                    }
                })
            },
            deleteedit () {
                this.delete_loading = true
                this.$Modal.warning({
                    title: '删除提示',
                    content: '确认删除模块类型？',
                    onOk: () => {
                        swtmoduledeletemoduledetail({ id: this.modalparams.id }).then(res => {
                            this.$Message.success('删除模块类型成功');
                            this.modal = false
                            this.yulan = false
                            this.delete_loading = false
                            this.$emit('askData')
                        })
                    }
                });
            },
            preview () {
                if (!this.yulan) {
                    this.yulan_loading = true
                    let params = {
                        css: this.modalparams.css,
                        html: this.modalparams.html,
                        js: this.modalparams.js
                    }
                    swtmodulepreviewhtml(params).then(res => {
                        this.log(res)
                        this.yulan_url = `${process.env.VUE_APP_API}/${res}`
                        this.yulan = true
                        this.yulan_loading = false
                    })
                }
            }
        }
    }
</script>
<style lang="less" scoped>
.templatecontrolCard{
    position: relative;
    width: 100%;
    height: 100%;
}
</style>
